<template>
  <div>
    <q-input
      dense
      outlined
      v-model.lazy="myData"
    >
      <template v-slot:after>
        <q-btn
          dense
          unelevated
          color="primary"
          label="选择"
          @click="onClick"
        />
      </template>
    </q-input>

    <q-dialog class="my-dialog" v-model="isFlagShow" @mousedown.stop>
      <q-card class="my-card q-mx-lg">
        <q-toolbar class="row items-center my-form-header">
          <div>
            {{message}}
          </div>
          <q-space />
          <q-btn
            flat
            round
            dense
            icon="mdi-close"
            @click="onClose"
          />
        </q-toolbar>
        <q-separator />
        <q-card-setion class="q-mx-sm">
          <div class="col q-gutter-xs my-form-container">
            <q-item class="items-center">
              <q-item-label>图片分类：</q-item-label>
              <q-item-section>
                <q-select
                  dense
                  outlined
                  options-dense
                  clearable
                  :options="appFieldTypeArr"
                  v-model="myImageFieldType"
                  option-value="label"
                  emit-value
                  options-selected-class="teal"
                  @update:model-value="onImageFieldTypeRefresh(myImageFieldType)"
                />
              </q-item-section>
            </q-item>
            <q-item class="items-center">
              <q-item-label>图片选择：</q-item-label>
              <q-item-section>
                <q-select
                  class="my-select-box"
                  dense
                  outlined
                  options-dense
                  clearable
                  :options="imageOption"
                  v-model="myImage"
                  option-value="label"
                  emit-value
                  options-selected-class="teal"
                  @update:model-value="onImageRefresh(myImage)"
                >
                <template v-slot:option="scope">
                  <q-item v-bind="scope.itemProps">
                    <q-item-section>
                      <q-avatar rounded size="md">
                        <img :src="scope.opt.label" alt="">
                      </q-avatar>
                    </q-item-section>
                  </q-item>
                </template>
                </q-select>
              </q-item-section>
            </q-item>
          </div>
        </q-card-setion>
        <q-separator />
        <div class="q-gutter-sm my-form-footer">
          <q-btn
            unelevated
            dense
            label="确定"
            type="submit"
            color="teal-3"
            @click="onSubmit"
            style="width: 80px"
          />
        </div>
      </q-card>
    </q-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, toRefs, computed, onMounted, PropType } from  'vue';
import api from 'axios'
import { uivCatalogUrlAPI, uivBaseVOAPI } from 'src/util/UivBaseConst';
import { useMessageNotify } from 'src/hook/common/useMessageNotify';
import { cataItem } from 'src/hook/common/useCatalogType';
import { useCatalogTool } from 'src/hook/common/useCatalogTool';

//图片查询返回结构
export interface TupleNode {
  id: number,
  label: string,
  fieldType: string
}

export default defineComponent({
  name: 'ImageSelectBox',
  props: {
    message: {
      type: String,
      default: () => {
        return '图像选择'
      }
    },
    appFieldTypeArr: {
      type: Array as PropType<cataItem[]>,
      required: true
    },
    url: {
      type: String,
      default: () => {
        return '';
      }
    }
  },
  emits: ['update:url'],
  setup (props, context) {
    //解构
    const {
      message,
      appFieldTypeArr,
      url
    } = toRefs(props)

    //映射
    const {
      findCatalogLabel,
      findCatalogId
    } = useCatalogTool();

    //消息通知
    const {
      showMessage
    } = useMessageNotify();

    //定义响应数据
    let myData = computed({
      get: () => {
        return url.value;
      },
      set: (sv: string) => {
        context.emit('update:url', sv);
      }
    });

    //选择按钮
    const onClick = () => {
      getImageFieldType();
      isFlagShow.value = true;
    }

    //对话框显示
    let isFlagShow = ref(false);
    let myImageFieldType = ref('请选择图片分类');
    let myImage = ref('请选择图片');

    //下拉列表框显示option
    let imageOption = ref< cataItem[]>([]);

    //根据图形ID，读取图像名称、图像分类
    const getImageFieldType = () => {
      //读取变量信息
      if ((myData.value) && (myData.value !== '')) {
        api.post(uivBaseVOAPI.UIV_TUPLE_SEARCH_VO_LIST_API, {
          url: myData.value
        }).then((res) => {
          if (res.data.message === 'Success') {
            let list: TupleNode[] = res.data.data;
            //console.log(list);

            //图形分类名称和图像名称
            if (list.length > 0) {
              let item: TupleNode = list[0];
              myImageFieldType.value = item.fieldType;
              myImage.value = item.label;
            }
          } else {
            showMessage(res.data.message);
          }
        }).catch((error) => {
          showMessage(error.message);
        });
      }
    }


    //读取图元信息
    const getImageList = (typeId: number) => {
      if (typeId > 0) {
        api.post(uivCatalogUrlAPI.TUPLE_SEARCH_LIST_API, {
          id: typeId
        }).then((res) => {
          if (res.data.message === 'Success') {
            imageOption.value.length = 0;
            let ls: cataItem[] = res.data.data;
            ls.forEach((item) => {
              imageOption.value.push(item);
            });
          }
        })
      }
    }

    //图像类型变化，对应图像列表发生变化
    const onImageFieldTypeRefresh = (label: string) => {
      let id = findCatalogId(appFieldTypeArr.value, label);

      //图像类型变化，更新图像列表
      if (id > 0) {
        alert(id);
        getImageList(id);
      }
    }

    //设备变化，对应变量列表发生变化
    const onImageRefresh = (label: string) => {
      myData.value = label;
      //console.log(myData.value);
    }


    //关闭窗口
    const onClose = () => {
      isFlagShow.value = false;
    }

    //提交窗口
    const onSubmit = () => {
      isFlagShow.value = false;
    }

    //初始化
    const init = () => {
      myData.value = url.value;
      getImageFieldType();
    }

    //组件挂载
    onMounted(() => {
      init();
    })

    return {
      message,
      appFieldTypeArr,
      myData,
      onClick,

      isFlagShow,
      myImageFieldType,
      myImage,
      imageOption,
      onImageFieldTypeRefresh,
      onImageRefresh,
      onClose,
      onSubmit,
      init
    };
  }
});

</script>

<style lang="scss" scoped>
.my-dialog {
  .my-card {
    width: 370px;
    max-width: 600px;

    .my-form-header {
      background-color: #e3dede;
      font-size: 18px;
    }

    .my-form-container {
      text-align: center;
      padding: 10px;
      height: 250px;

      .my-select-box {
        max-width: 250px;
        overflow: hidden;  // 超出的文本隐藏
        text-overflow: ellipsis; // 溢出用省略号显示
      }
    }
    .my-form-footer {
      text-align: right;
      padding: 5px;
      background-color: #cecaca;
    }
  }
}
</style>
